<template>
  <div class="app-container">
    <el-card style=" padding: 30px">
      <div class="msg-title">{{ form.title }}</div>
      <div class="msg-ce">
        <div v-if="form.nickname ">作者：{{ form.nickname }}</div>
        <div>作者ID：{{ form.memberId }}</div>
        <div>发布时间：{{ form.publishTime }}</div>
      </div>
      <div class="msg-content">
        <div v-html="form.content"></div>
      </div>
      <div class="msg-cate" v-if="form.articleHotTopicList.length > 0">
        <div>
          话题：
          <el-tag
            size="small"
            v-for="(item, index) in form.articleHotTopicList"
            :key="index"
            type="success"
            style="margin: 10px 10px 0"
          >{{ item.hotTopicName }}</el-tag
          >
        </div>
      </div>
      <div class="msg-image">
        <div>
          <el-image
            v-for="(item, index) in form.linkUrl"
            :key="index"
            :src="item"
            :preview-src-list="[item]"
            style="width: 100px; height: 100px; margin: 10px"
          />
        </div>
      </div>
      <div class="msg-num">
        <div class="line">
          <div>{{ form.visitCount ? form.visitCount : 0 }}</div>
          <div>阅读量</div>
        </div>
        <div class="line">
          <div>{{ form.likeCount ? form.likeCount : 0 }}</div>
          <div>点赞</div>
        </div>
        <div class="line">
          <div>{{ form.collectCount ? form.collectCount : 0 }}</div>
          <div>收藏</div>
        </div>
        <div>
          <div @click="commentDetail()" style="color: #3a8ee6; cursor: pointer">
            {{ form.commentCount ? form.commentCount : 0 }}
          </div>
          <div>评论</div>
        </div>
      </div>

      <div class="apply-con">
        <div>审核结果：</div>
        <div>
          <el-radio-group v-model="verifyStatus">
            <el-radio :label="1">通过审核</el-radio>
            <el-radio :label="2">不通过审核</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="submit-btn">
        <el-button size="small" style="width: 100px;" @click="cancel"
        >取消</el-button
        >
        <el-button
          size="mini"
          style="width: 100px"
          type="primary"
          @click="onSubmit"
        >提交</el-button
        >
      </div>
    </el-card>
  </div>
</template>
<script>
import {getArticleInfo, editArticleAudit} from "@/api/article";

export default {
  name: "apply",
  data() {
    return {
      id: "",
      form: {},
      verifyStatus: 1
    };
  },
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.getInfo();
    }
  },
  methods: {
    commentDetail() {
      this.$router.push({
        path: "/content/talk",
        query: {
          id: this.id
        }
      });
    },
    cancel() {
      this.$router.back();
    },
    onSubmit() {
      let data = {
        id: this.id,
        verifyStatus: this.verifyStatus
      };
      editArticleAudit(data).then(res => {
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        setTimeout(() => {
          this.$router.back();
        }, 100);
      });
    },
    getInfo() {
      getArticleInfo(this.id).then(res => {
        if (res.data.linkUrl) {
          res.data.linkUrl = res.data.linkUrl.split(",")
        } else {
          res.data.linkUrl = []
        }

        this.form = res.data;
      });
    }
  }
};
</script>

<style scoped lang="scss">
.app-container {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
  position: relative;
}

.msg-title {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
}

.msg-ce {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;

  div {
    margin: 0 30px;
    color: #9e9e9e;
  }
}

.msg-content {
  margin-top: 20px;
}

.msg-cate {
  margin-top: 20px;
}

.line {
  border-right: 1px solid #e0e0e0;
}

.msg-image {
  margin-top: 20px;
}

.msg-num {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;

  > div {
    text-align: center;
    padding: 0 40px;
    //margin: 0 40px;
    > div:first-child {
      font-size: 16px;
      margin-bottom: 15px;
      //font-weight: bold;
    }
  }
}

.apply-con {
  display: flex;
  margin-top: 40px;
}

.submit-btn {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
</style>
